<style>
    .his-wrapper {
        background-color: #fff;
        box-sizing: border-box;
        padding: 20px;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0, 0, 0, .15);
    }
    .el-form-item {
        margin-bottom: 0 !important;
    }
    .his-wrapper ._label {
        line-height: 32px;
        color: #333;
        display: inline-block;
    }
    .his-wrapper ._label:nth-of-type(3),
    .his-wrapper ._label:nth-of-type(2) {
        margin-left: 20px;
    }
    .his-wrapper ._table {
        padding-top: 20px;
    }
    .his-wrapper .footer {
        text-align: right;
        box-sizing: border-box;
        padding-top: 20px;
    }
    .his-wrapper .dialog-wrapper {
        width: 100%;
        height: 350px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .his-wrapper .dialog-wrapper ._row {
        width: 100%;
        margin-bottom: 10px;
    }
    .his-wrapper .dialog-wrapper ._row span {
        width: 49%;
        line-height: 30px;
        font-weight: bold;
        vertical-align: top;
        display: inline-block;
    }
    .his-wrapper .dialog-wrapper ._row i {
        font-size: 14px;
        color: #999;
        font-weight: normal;
    }
    .his-wrapper .dialog-wrapper ._row p {
        font-size: 14px;
        font-weight: bold;
        display: inline-block;
    }
</style>
<body>
    <div class="his-wrapper" id="wrapper">
        <span class="_label">类型：</span>
        <el-radio-group v-model="type" style="padding-top: 3px;">
            <el-radio :label="1">门诊</el-radio>
            <el-radio :label="2">住院</el-radio>
        </el-radio-group>
        <span class="_label">起始时间：</span>
        <el-date-picker
            v-model="startDay"
            type="date" size="small"
            @change="handleChangeStartDate"
            :picker-options="options.start"
            placeholder="选择日期">
        </el-date-picker>
        <span class="_label">结束时间：</span>
        <el-date-picker
            v-model="endDay"
            type="date" size="small"
            @change="handleChangeEndDate"
            :picker-options="options.end"
            placeholder="选择日期">
        </el-date-picker>
        <el-button size="small" type="primary" @click="getTableData" style="margin-left: 20px">His查询</el-button>
        <div style="padding-top: 20px;">
            <span class="_label">患者姓名：</span>
            <el-input size="small" v-model="name" style="width: 200px" placeholder="请输入患者姓名" />
            <span class="_label">手机号：</span>
            <el-input size="small" v-model="phone" style="width: 200px" placeholder="请输入手机号" />
            <el-button size="small" type="primary" @click="handleSearchPat" style="margin-left: 20px">搜索</el-button>
            <el-button size="small" type="warning" @click="handleClear" style="margin-left: 20px">清除</el-button>
        </div>
        <div class="_table">
            <el-table :data="table.data" border v-loading="table.loading">
                <el-table-column
                    label="序号"
                    align="center"
                    prop="No"
                    width="80"
                    >
                </el-table-column>
                <el-table-column
                    label="就诊号"
                    align="center"
                    prop="pat2"
                    >
                </el-table-column>
                <el-table-column
                    label="宝宝姓名"
                    align="center"
                    prop="pat6"
                    >
                </el-table-column>
                <el-table-column
                    label="联系电话"
                    align="center"
                    prop="pat5"
                    >
                </el-table-column>
                <el-table-column
                    label="妈妈姓名"
                    align="center"
                    >
                    <template slot-scope="scope">
                        {{ scope.row.pat7 == '' ? '无' : scope.row.pat7 }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    >
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning" @click="handleAddQueue(scope.row)">添加到系统</el-button>
                        <el-button size="mini" type="primary" @click="handleChecked(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="footer">
                <el-pagination
                    background
                    @current-change="handleChangePage"
                    layout="prev, pager, next"
                    :total="table.allData.length">
                </el-pagination>
            </div>
        </div>

        <el-dialog
            title="HIS 系统用户详细信息"
            :visible.sync="dialog.show"
            width="30%">
            <div class="dialog-wrapper">
                <div class="_row">
                    <span>就诊卡号：<i>{{ dialog.info.pat2 }}</i></span>
                    <span>住院号：<i>{{ dialog.info.pat4 }}</i></span>
                </div>
                <div class="_row">
                    <span>联系电话：<i>{{ dialog.info.pat5 }}</i></span>
                    <span>宝宝姓名：<i>{{ dialog.info.pat6 }}</i></span>
                </div>
                <div class="_row">
                    <span>宝宝性别：<i>{{ dialog.info.pat10 == '0' ? '男' : '女' }}</i></span>
                    <span v-if="dialog.info.pat11">出生日期：<i>{{ dialog.info.pat11.indexOf(' ') > -1 ? dialog.info.pat11.split(' ')[0] : dialog.info.pat11 }}</i></span>
                </div>
                <div class="_row">
                    <span>孕周/胎龄：<i>{{ dialog.info.pat12 }}</i></span>
                    <span>预产期：<i>{{ dialog.info.pat13 }}</i></span>
                </div>
                <div class="_row">
                    <span>妈妈姓名：<i>{{ dialog.info.pat7 }}</i></span>
                    <span>爸爸姓名：<i>{{ dialog.info.pat8 }}</i></span>
                </div>
                <div class="_row">
                    <p>家庭地址：<i>{{ dialog.info.pat9 }}</i></p>
                </div>
                <div class="_row">
                    <span>出生体重：<i>{{ dialog.info.pat14 }}</i></span>
                    <span>出生身长：<i>{{ dialog.info.pat15 }}</i></span>
                </div>
                <div class="_row">
                    <span>出生头围：<i>{{ dialog.info.pat16 }}</i></span>
                    <span>出生医院：<i>{{ dialog.info.pat18 }}</i></span>
                </div>
                <div class="_row">
                    <span>出院体重：<i>{{ dialog.info.pat19 }}</i></span>
                    <span>出院身长：<i>{{ dialog.info.pat20 }}</i></span>
                </div>
                <div class="_row">
                    <p>目前诊断：<i>{{ dialog.info.pat22 }}</i></p>
                </div>
                <!-- <hr> -->
                <!-- <div class="title" style="font-size: 20px; margin-bottom: 10px;">电子病历信息</div>
                <div class="_row">
                    <span>姓名：<i>{{ dialog.EMR.pat6 }}</i></span>
                    <span>性别：<i>{{ dialog.EMR.pat10 == 1 ? '女' : '男' }}</i></span>
                </div>
                <div class="_row">
                    <span>出生地：<i>{{ dialog.EMR.pat23 }}</i></span>
                    <span>年龄：<i>{{ dialog.EMR.pat11 == 0 ? '' : dialog.EMR.pat11 }}</i></span>
                </div>
                <div class="_row">
                    <span>民族：<i>{{ dialog.EMR.pat24 }}</i></span>
                    <span>联系方式：<i>{{ dialog.EMR.pat5 }}</i></span>
                </div>
                <div class="_row">
                    <span>家庭地址：<i>{{ dialog.EMR.pat9 }}</i></span>
                    <span>入院时间：<i>{{ dialog.EMR.date3 }}</i></span>
                </div>
                <div class="_row">
                    <p>主诉：<i>{{ dialog.EMR.emr1 }}</i></p>
                </div>
                <div class="_row">
                    <p>现病史：<i>{{ dialog.EMR.emr2 }}</i></p>
                </div>
                <div class="_row">
                    <p>既往史：<i>{{ dialog.EMR.emr3 }}</i></p>
                </div>
                <div class="_row">
                    <p>个人史：<i>{{ dialog.EMR.emr4 }}</i></p>
                </div>
                <div class="_row">
                    <p>家族史：<i>{{ dialog.EMR.emr5 }}</i></p>
                </div>
                <div class="_row">
                    <p>初步诊断：<i>{{ dialog.EMR.emr6 }}</i></p>
                </div>
                <div class="_row">
                    <p>出院诊断：<i>{{ dialog.EMR.emr7 }}</i></p>
                </div> -->
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="handleCanelDialog">关 闭</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="请选择要加入的队列"
            :visible.sync="dialogJoin.show"
            width="30%">
            <div class="dialog-wrapper" style="height: auto !important;max-height: 400px;">
                <el-radio-group v-model="dialogJoin.queue">
                    <el-radio style="width: 100%; margin-bottom: 20px;" :label="item.id" v-for="(item, index) in queueList" :key="index">{{ item.queueName }}</el-radio>
                </el-radio-group>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleCanelDialogJoin">取 消</el-button>
                <el-button type="primary" size="small" @click="handleSureDialogJoin">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</body>
<script>
require(['bbcare'], function ($bb) {
    var URL = $bb.baseUrl("followup")

    var vm = new Vue({
        el: '#wrapper',
        data: function() {
            return {
                startDay: '',
                endDay: '',
                start: '',
                end: '',
                options: {
                    start: {
                        disabledDate: function (time) {
                            var currentDate = new Date().getTime()
                            return time.getTime() > currentDate
                        }
                    },
                    end: {
                        disabledDate: function (time) {
                            var currentDate = new Date().getTime()
                            return time.getTime() > currentDate
                        }
                    }
                },
                table: {
                    data: [],
                    allData: [],
                    current: 1,
                    size: 10,
                    total: 0,
                    loading: false
                },

                type: 2,
                name: '',
                phone: '',
                dialog: {
                    show: false,
                    info: {},
                    EMR: {}
                },
                dialogJoin: {
                    show: false,
                    queue: '',
                    info: {},
                    EMR: {}
                },
                queueList: []
            }
        },
        created: function() {
            this.endDay = this.getFormatDate(new Date())
            var oneDay = 3600 * 24 * 1000
            this.startDay = this.getFormatDate(new Date().getTime() - oneDay * 7)
            this.start = this.clone(this.startDay)
            this.end = this.clone(this.endDay)
            this.getTableData()
            this.getQueueList()
        },
        methods: {
            /**
             * 选择开始时间
             * @param { Date } val
             */
            handleChangeStartDate: function (val) {
                var s = this.getDateTime(val)
                var e = this.getDateTime(this.endDay)
                if (s > e) {
                    this.startDay = this.clone(this.start)
                    return this.$message.error('起始日期不能大于终止日期')
                }
                this.start = this.getFormatDate(this.startDay)
                
            },
            /**
             * 选择结束时间
             * @param { Date } val
             */
            handleChangeEndDate: function (val) {
                var s = this.getDateTime(this.startDay)
                var e = this.getDateTime(val)
                if (s > e) {
                    this.endDay = this.clone(this.end)
                    return this.$message.error('起始日期不能大于终止日期')
                }
                this.end = this.getFormatDate(this.endDay)
                
            },
            /**
             *  获取格式化时间
             *  @param { string | number | Date } date
             */
            getFormatDate: function(date) {
                var time = ''
                if (Object.prototype.toString.call(date) !== '[object Date]') time = new Date(date)
                else time = date 
                var year = time.getFullYear(),
                   month = time.getMonth() + 1,
                     day = time.getDate()
                function addZore(num) {
                    return num < 10 ? '0' + num : num
                }
                return year + '-' + addZore(month) + '-' + addZore(day)
            },
            /**
             * 获取对象得 时间戳
             * @param { string | number | Date } date
             */
            getDateTime: function (date) {
                if (Object.prototype.toString.call(date) == '[object Date]') return date.getTime()
                if (typeof date == 'number') return date
                return new Date(date).getTime()
            },
            /**
             * 克隆一个对象
             * @param { * } obj
             */
            clone: function (obj) {
                return JSON.parse(JSON.stringify(obj))
            },
            /**
             * 获取表格数据
             */
            getTableData: function() {
                var that = this
                that.table.loading = true
                $bb.ajax({
                    url: URL + 'followup/webapi/his/getpatientlist?type=' + this.type + '&start_time=' + this.getFormatDate(this.startDay) + '&end_time=' + this.getFormatDate(this.endDay),
                    success: function (res) {
                        if (res.code == 2000) {
                            that.$message.error(res.msg);
                            that.table.loading = false
                            return
                        }
                        that.table.loading = false
                        that.table.allData = res.data
                        that.getPageData()
                    }
                })
            },
            /**
             * 获取单页数据
             */
            getPageData: function () {
                var that = this
                this.table.data = []
                var i = 0
                this.table.allData.forEach(function (item, index) {
                    if ((that.table.current - 1) * that.table.size <= index && that.table.current * that.table.size > index) {
                        i++
                        item.No = (that.table.current - 1) * that.table.size + i
                        that.table.data.push(item)
                    }
                })
            },
            /**
             * 改变页面大小
             * @param { number } page 当前选中的页码
             */
            handleChangePage: function (page) {
                this.table.current = page
                this.getPageData()
            },
            /**
             * 查询
             */
            handleSearchPat: function () {
                if (this.name == '' && this.phone == '') return this.getPageData()
                var result = [], that = this
                this.table.allData.forEach(function (item, index) {
                    if (item.pat6.indexOf(that.name) > -1 && item.pat5.indexOf(that.phone) > -1) {
                        result.push(item)
                    }                    
                })
                this.table.data = result
            },
            /**
             * 清除选择
             */
            handleClear: function () {
                this.name  = ''
                this.phone = ''
                this.getPageData()
            },
            /**
             * 查看
             * @param {*} row
             */
            handleChecked: function (row) {
                var that = this
                $bb.ajax({
                    url: URL + 'followup/webapi/his/getpatientinfo?his_id=' + row.pat1,
                    success: function (res) {
                        if (!res.data.pat1) res.data.pat1 = row.pat1;
                        that.dialog.show = true
                        that.dialog.info = res.data
                    }
                }) 
                // $bb.ajax({
                //     url: URL + 'followup/service/hisInfo/getEMRList',
                //     data: JSON.stringify({
                //         data: JSON.stringify({
                //             patient_id: row.pat1
                //         })
                //     }),
                //     success: function (res) {
                //         that.dialog.EMR = res.data[res.data.length - 1]
                //     }
                // })
            },
            /**
             * 取消查看 
             */
            handleCanelDialog: function () {
                this.dialog.show = false
            },
            /**
             * 取消查看加入的队列
             */
            handleCanelDialogJoin: function () {
                this.dialogJoin.show = false
                this.dialogJoin.queue = ''
            },
            /**
             * 添加到系统种
             * @param {*} row
             */
            handleAddQueue: function (row) {
                var that = this
                $bb.ajax({
                    url: URL + 'followup/webapi/his/getpatientinfo?his_id=' + row.pat1,
                    success: function (res) {
                        if (!res.data.pat1) res.data.pat1 = row.pat1;
                        that.dialogJoin.show = true;
                        that.dialogJoin.info = res.data;
                    }
                }) 
                // $bb.ajax({
                //     url: URL + 'followup/service/hisInfo/getEMRList',
                //     data: JSON.stringify({
                //         data: JSON.stringify({
                //             patient_id: row.pat1
                //         })
                //     }),
                //     success: function (res) {
                //         that.dialogJoin.EMR = res.data[res.data.length - 1]
                //     }
                // })
            },
            /**
             * 获取队列列表
             */
            getQueueList: function () {
                var that = this
                $bb.ajax({
                    url: URL + 'followup/service/queue/followQueueListQuery',
                    data: JSON.stringify({
                        data: {
                            showFlag: "1"
                        }
                    }),
                    success: function (res) {
                        that.queueList = res.data.rows
                    }
                })
            },
            /**
             * 加入到队列中
             */
            handleSureDialogJoin: function () {
                if (this.dialogJoin.queue == '') return this.$message.error('请选择要加入的队列')
                this.dialogJoin.info.queueid = this.dialogJoin.queue
                this.dialogJoin.show = false
                this.dialogJoin.info.EMR = this.dialogJoin.EMR
                $bb.openPage('addPatient', this.dialogJoin.info)
            }
        }
    })
})
</script>
